<!--订单管理页面-->
<template>
  <div>
    <div style="margin:10px 0;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
      <el-dropdown size="small" split-button type="primary"  @command="handleSelectionPayment" trigger="click">
        {{state}}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="全部">全部</el-dropdown-item>
          <el-dropdown-item command="已缴费">已缴费</el-dropdown-item>
          <el-dropdown-item command="未缴费">未缴费</el-dropdown-item>
        </el-dropdown-menu>
        <!--筛选的内容放这里-->
      </el-dropdown>
      <div class="search_box">
        <el-input style="width: 300px" placeholder="可模糊查询宿舍位置信息" v-model="search" >
          <i slot="suffix" class="el-icon-close" @click="clearAndLoad"style="margin-top: 10px"></i>
        </el-input>

        <el-button class="ml-5"type="primary" @click="load">搜索</el-button>
      </div>
    </div >
    <div class="modify" style="margin: 10px 0;">
      <el-button type="primary" style="font-size: 12px; " @click="addEpayment">新增 <i class="el-icon-circle-plus-outline"style="margin-left:5px;"> </i></el-button>
<!--      <el-button type="success" style="font-size: 12px; ">批量完成 <i class="el-icon-edit"style="margin-left:5px;"> </i></el-button>-->

<!--      <el-popconfirm-->
<!--          class="ml-5"-->
<!--          confirm-button-text='确定'-->
<!--          cancel-button-text='我再想想'-->
<!--          icon="el-icon-info"-->
<!--          icon-color="red"-->
<!--          title="确定要删除吗？"-->
<!--          @confirm="delBash"-->
<!--      >-->
<!--        <el-button type="danger" style="font-size: 12px;" slot="reference">批量删除<i class="el-icon-remove-outline" style="margin-left:5px;"> </i></el-button>-->
<!--      </el-popconfirm>-->
      <el-upload action="http://localhost:9090/epayment/import" style="display: inline-block" :show-file-list="false" accept="xlsx" :on-success="importSuccess" :on-error="importFail" :headers="headersObj">
<!--        <el-button type="primary" style="font-size: 12px; margin-left: 10px;">导入<i class="el-icon-bottom"style="margin-left:5px;"> </i></el-button>-->
      </el-upload>
      <el-button class="ml-5" type="primary" style="font-size: 12px; " @click="exp">导出<i class="el-icon-top"style="margin-left:5px;"> </i></el-button>
    </div>
    <!--顶部搜索筛选等操作 end-->
    <!--表格主体 start-->
    <el-table :data="tableData"
              style="width: 100%"
              :default-sort = "{prop: 'date', order: 'descending'}"
              @selection-change="handleSelectionChange"
              :header-cell-style="tableHeaderColor">
<!--      <el-table-column type="selection" width="55" ></el-table-column>-->
      <el-table-column prop="user.username" label="缴费人学号" sortable width="110"></el-table-column>
      <el-table-column prop="user.nickname" label="缴费人员名字" sortable width="130"></el-table-column>
      <el-table-column prop="showTime" label="缴费时间" sortable width="130"></el-table-column>
      <el-table-column prop="campus" label="校区" sortable width="130"></el-table-column>
      <el-table-column prop="area" label="区域" sortable width="130"></el-table-column>
      <el-table-column prop="building" label="楼栋号" sortable width="130"></el-table-column>
      <el-table-column prop="roomId" label="宿舍号"sortable width="130"></el-table-column>
      <el-table-column prop="user.status" label="是否缴费"sortable width="130"></el-table-column>
      <el-table-column prop="money" label="应缴费金额"sortable width="130"></el-table-column>

      <el-table-column label="操作">
        <template v-slot="scope" >
<!--          测试的时候把disabled去掉-->
          <el-button :disabled="scope.row.status === 1" type="success" @click.native.prevent="modifyEpayment(scope.$index)">编辑 <i class="el-icon-edit"></i></el-button>

<!--          删除按钮不需要-->
<!--          <el-popconfirm-->
<!--              class="ml-5"-->
<!--              confirm-button-text='确定'-->
<!--              cancel-button-text='我再想想'-->
<!--              icon="el-icon-info"-->
<!--              icon-color="red"-->
<!--              title="确定要删除吗？"-->
<!--              @confirm="del(scope.$index)"-->
<!--          >-->
<!--            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>-->
<!--          </el-popconfirm>-->

        </template>
      </el-table-column>
    </el-table>
    <!--表格主体 end-->
    <!--分页 end-->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[5,8, 10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count">
      </el-pagination>
    </div>
    <!--分页 end-->
    <!--嵌套表单 start-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form label-width="100px">
        <el-form-item label="缴费人员学号">
          <el-input v-model="form.username" autocomplete="off"
                    :placeholder="form.uid"></el-input>
        </el-form-item>

        <el-form-item label="校区">
          <el-dropdown @command="handleDropDownClickCampus" trigger="click">
            <span class="el-dropdown-link">
              {{form.campus}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <span style="color: red; margin-left: 30px" v-show="checkEmpty(form.campus)">不为空</span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="宝山校区">宝山校区</el-dropdown-item>
              <el-dropdown-item command="延长校区">延长校区</el-dropdown-item>
              <el-dropdown-item command="嘉定校区">嘉定校区</el-dropdown-item>
              <el-dropdown-item command="东京校区">东京校区</el-dropdown-item>
              <el-dropdown-item command="新闸路校区">新闸路校区</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>

        <el-form-item label="区域">
          <el-dropdown @command="handleDropDownClickArea" trigger="click">
            <span class="el-dropdown-link">
              {{form.area}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <span style="color: red; margin-left: 30px" v-show="checkEmpty(form.area)">不为空</span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="南区">南区</el-dropdown-item>
              <el-dropdown-item command="校内">校内</el-dropdown-item>
              <el-dropdown-item command="研究生公寓">研究生公寓</el-dropdown-item>
              <el-dropdown-item command="新世纪大学生村">新世纪大学生村</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-form-item>

        <el-form-item label="楼栋号">
          <el-input v-model="form.building" autocomplete="off"
                    :placeholder="form.building"></el-input>
          <span style="color: red; margin-left: 30px" v-show="checkEmpty(form.building)">不为空</span>

        </el-form-item>
        <el-form-item label="宿舍号">
          <el-input v-model="form.roomId" autocomplete="off"
                    :placeholder="form.roomId"></el-input>
          <span style="color: red; margin-left: 30px" v-show="checkEmpty(form.roomId)">不为空</span>

        </el-form-item>




        <el-form-item label="是否缴费">
<!--          <el-input v-model="form.status"-->
<!--                    autocomplete="off"-->
<!--                    :placeholder="form.user ? form.user.username : ''"></el-input>-->
          <el-radio v-model="form.status" :label="1" :disabled="(checkEmpty(form.username)&&(form.status=0)) === 0">已缴费</el-radio>
          <el-radio v-model="form.status" :label="0" :disabled="(!checkEmpty(form.username)&&(form.status=1)) === 1" >未缴费</el-radio>
        </el-form-item>
        <el-form-item label="缴费金额">
          <el-input v-model="form.money" autocomplete="off"
          :placeholder="form.money"></el-input>
        </el-form-item>
        <span style="color: red; margin-left: 30px" v-show="form.money>4000">食不食油饼, 黑心的一塌糊涂啊</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveEpayment">确 定</el-button>
      </div>
    </el-dialog>
    <!--嵌套表单 end-->
  </div>
</template>


<script>


export default {
  name: "PaymentManagement",
  data(){
    return{
      //页签
      plate:"电费管理",
      func:"缴费管理",
      tableData: [],
      count:0,
      pageNum:1,
      pageSize:5,
      state:"全部", // 全部, 已缴费, 未缴费
      search:"",
      multipleSelection:[],
      dialogFormVisible:false,
      form:{},
      title:"",
      headersObj:{
        token:JSON.parse(localStorage.getItem("user")).token
      },
    }
  },
  created() {
    this.load()
    this.$emit("generateTab",this.plate,this.func)
    this.clearForm();
  },
  methods:{

    checkEmpty(x){
      if(x == "" || x == null || x == undefined)
      {
        return true;
      }
      else
      {
        return false;
      }
    },
    // 修改table header的背景色
    clearForm(){
      this.form = {
        building:"",
        campus:"",
        area:"",
        username:"",
        uid:"",
        status:"",
        money:"",
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #e0f6fe;color: #303133;font-weight: 600;font-size:12px;'
      }
    },
    load() {
      //axios方式http://localhost:9090前缀写在了request.js文件中，可省略
      this.request({
        url:"/epayment/page",
        method:"GET",
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          search:this.search,         //根据姓名、昵称、邮箱、地址、手机号五个方面模糊查询
          state:this.state
        },
      }).then(
          res => {
            console.log(res.data.records);
            this.tableData = res.data.records.map(a=>{
              a.showTime = a.createTime.slice(0, 10);
              if(a.user) a.user.status = (a.status === 1 ? '已缴费' : '未缴费')
              else a.user = {status:'未缴费'}
              return a
            })
            this.count = res.data.total;
          }
      )
      // fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize+"&search="+this.search)
      //     .then(res => res.json()).then(res => {
      //   console.log(res);
      //   this.tableData = res.records;
      //   this.count = res.total;
      // })
    },
    //分页
    handleSizeChange(pageSize){
      console.log("pageSize:"+pageSize);
      this.pageSize=pageSize;
      this.load();
    },
    handleCurrentChange(pageNum){
      console.log("pageNum:"+pageNum);
      this.pageNum=pageNum;
      this.load();
    },
    clearAndLoad(){
      this.pageNum=1;
      this.pageSize=5;
      this.search="";
      this.load();
    },
    //点击新增用户弹窗
    addEpayment(){
      this.clearForm();
      this.title = "添加";
      this.dialogFormVisible=true;
    },
    //点击确认保存或更新用户信息
    checkForm(){
      let test = /^[0-9]+(.[0-9]{1,3})?$/
      let num = /^\d{1,4}$/
      if(!test.exec(this.form.money)) return {code:false, msg: '金额出错'}
      if(this.form.building != null && this.form.building != "" && this.form.building != undefined && num.exec(this.form.building)
          && this.form.campus != null && this.form.campus != "" && this.form.campus != undefined
          && this.form.area != null && this.form.area != "" && this.form.area != undefined
          && this.form.roomId != null && this.form.roomId != "" && this.form.roomId != undefined && num.exec(this.form.roomId)){
        return {code:true};
      }
      else return {code:false, msg:"有必填的信息/或者填的信息有误"}
    },
    saveEpayment(){
      let r = this.checkForm();
      console.log(r);
      if(!r.code)
      {

        this.$message.error(r.msg);
        return;
      }
      this.dialogFormVisible=false;
      this.request.post("/epayment",this.form).then(res=>{
        console.log(res)
        if(res.code == "200"){
          this.$message.success("保存成功！");
          this.load();
        }else{
          this.$message.error(res.msg);
          this.load();
        }
      })
    },
    //用户点击取消
    cancel(){
      this.dialogFormVisible=false;
      this.load();
    },
    //点击编辑用户
    modifyEpayment(idx){
      //console.log("tableData:",this.tableData);
      //console.log("index:"+idx)
      //console.log("row:"+res)
      let res=this.tableData[idx];
      this.title = "编辑";
      this.dialogFormVisible=true;
      delete res.user;
      this.form={...res};
    },
    //点击删除用户
    del(idx){
      let id=this.tableData[idx].id;
      this.request.delete("/user/"+id).then(res=>{
        console.log(res)
        if(res){
          this.$message.success("删除成功！");
          this.load();
        }else{
          this.$message.error("删除失败！");
        }
      })
    },
    //批量删除用户——选择
    handleSelectionChange(val){
      console.log(val)
      this.multipleSelection = val;
    },
    //点击批量删除按钮
    delBash(){
      console.log("点击批量删除按钮")
      let ids=this.multipleSelection.map(v=>v.id)
      console.log(ids)
      this.request.post("/user/del/bash",ids).then(res=>{
        console.log(res)
        if(res){
          this.$message.success("删除成功！");
          this.load();
        }else{
          this.$message.error("删除失败！");
        }
      })
    },
    //导出
    exp(){
      //无用户信息（token）则代表当前为非法登录，不能够使用导出接口
      let user=localStorage.getItem("user")
      console.log(user)
      if (user==null){
        this.$message("无用户信息，请重新登录！")
        return false
      }else{
        var token=JSON.parse(user).token
        if(token==null){
          this.$message("无token信息，请重新登录！")
          return false
        }
      }
      //导出不拦截，在前端请求时，另外请求一个没有任何用处的token方法，达到校验的目的
      this.request.post("/user/token").then(res=> {
        console.log("res:" + res);
        if (res.code === '401') {
          return false
        } else {
          window.open(`http://localhost:9090/epayment/export?pageNum=${this.pageNum}&pageSize=${this.pageSize}&search=${this.search}&state=${this.state}`)
          return true
        }
      })

    },
    //导入
    importSuccess(){
      this.$message.success("导入成功！");
      this.load();
    },

    // 点击下拉框来选中区域
    handleDropDownClickArea(area){
      this.form.area = area;
    },
    handleDropDownClickCampus(campus){
      this.form.campus = campus;
    },
    handleSelectionPayment(state){
      this.state = state;
      this.load();
    },
    importFail(){
      this.$message.error("导入失败！");
      this.load();
    },
  }
}
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right-width: 0;
}
.pagination,.search_box{
  padding: 10px 0px;
}


.el-dropdown-link {
  cursor: pointer;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
